<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style/page-style/eat-1.css">
    <title>美食详情页</title>
</head>
<body>
    <div class="container">
        <!-- head部分 -->
        <div class="grid grid-cell head">
            <div class="esc"> <a href="./人气美食.html"><img src="./imgs/查看更多@3x.png" alt=""></a></div>
            <div class="head-text">美食详情页</div>
            <div class="share"> <a href=""><img src="./imgs/分享-黑.png" alt=""></a></div>
        </div>
        <!-- 轮播图部分 carsousel-->
        <div class="grid grid-cell carousel">
            <!-- carousel -->
            <div class="parts">
                <!-- 单选按钮 -->
                    <input type="radio" class="danxuan" name="r" id="r1" checked>
                    <input type="radio" class="danxuan" name="r" id="r2">
                    <input type="radio" class="danxuan" name="r" id="r3">
                    <input type="radio" class="danxuan" name="r" id="r4">
                    <input type="radio" class="danxuan" name="r" id="r5">
                <div class="picture">
                    <div><img src="./imgs/常州poster.jpg" alt="" class="i1"></div>
                   <div><img src="./imgs/环球港.webp" alt=""></div> 
                    <div><img src="./imgs/青枫公园2.jpg" alt=""></div>
                    <div><img src="./imgs/隔湖.webp" alt=""></div>
                    <div><img src="./imgs/金坛.webp" alt=""></div>
                </div>
                <!-- 控制器 control-->
                <!-- label与单选按钮形成关联映射 -->
                <div class="control">
                    <label for="r1"></label>
                    <label for="r2"></label>
                    <label for="r3"></label>
                    <label for="r4"></label>
                    <label for="r5"></label>
                </div>
            </div>
        </div>
        <!-- 店铺名称 -->
        <div class="title">
            <p class="name"><strong>老西门土菜馆</strong>
            <span>人均¥50</span></p>
            <p class="addr">所属景区：盐城市南阳镇大洋湾景区</p>
        </div>
        <!-- 店铺地址+电话 -->
        <div class="store">
            <div class="site"><img src="./imgs/地址555@2x.png" alt=""></div>
            <div class="describe"><p>江苏省盐城市南洋镇新洋七组大洋湾景区外唐渎里美食街</p></div>
            <div class="tel">
                <img src="./imgs/电话111@2x.png" alt="">
            </div>
        </div>
        <!-- 立即购买 -->
        <div class="buy">
            <div class="once">
                <span>立即购买</span>
            </div>
        </div>
        <!-- 商家特色菜 -->
        <div class="p">
            <div class="title">
                <span>商家特色菜</span>
            </div>
            <div class="out">
            <div class="food">
                <div class="cai">
                    <img src="" alt="">
                    <span>红烧狮子头</span>
                </div>
                <div class="cai">
                    <img src="" alt="">
                    <span>红烧狮子头</span>
                </div>
                <div class="cai">
                    <img src="" alt="">
                    <span>红烧狮子头</span>
                </div>
                <div class="cai">
                    <img src="" alt="">
                    <span>红烧狮子头</span>
                </div>
                <div class="cai">
                    <img src="" alt="">
                    <span>红烧狮子头</span>
                </div>
                <div class="cai">
                    <img src="" alt="">
                    <span>红烧狮子头</span>
                </div>
                <div class="cai">
                    <img src="" alt="">
                    <span>红烧狮子头</span>
                </div>
                 <div class="cai">
                    <img src="" alt="">
                    <span>红烧狮子头</span>
                </div>
            </div>
        </div>
        </div>
        <!-- 周边推荐 -->
        <div class="recommend">
            <div class="title">
                <span>周边推荐</span>
                <div class="area">
                    <input type="radio" name="s" id="s1" checked>
                    <input type="radio" name="s" id="s2">
                    <input type="radio" name="s" id="s3">
                    <label for="s1" class="s1">景区</label>
                    <label for="s2" class="s2">住宿</label>
                    <label for="s3" class="s3">特产</label>
                    <div class="area-all">
                        <div class="area-in">
                            <div class="p-all">
                                <div class="picture">
                                    <img src="" alt="">
                                    <div class="word">大洋湾景区</div>
                                </div>
                                <div class="picture">
                                    <img src="" alt="">
                                    <div class="word">大洋湾景区</div>
                                </div>
                                <div class="picture">
                                    <img src="" alt="">
                                    <div class="word">大洋湾景区</div>
                                </div>
                            </div>
                            <div class="p-all">
                                <div class="picture">
                                    <img src="" alt="">
                                    <div class="word">大洋湾景区</div>
                                </div>
                                <div class="picture">
                                    <img src="" alt="">
                                    <div class="word">大洋湾景区</div>
                                </div>
                                <div class="picture">
                                    <img src="" alt="">
                                    <div class="word">大洋湾景区</div>
                                </div>
                            </div>
                            <div class="p-all">
                                <div class="picture">
                                    <img src="" alt="">
                                    <div class="word">大洋湾景区</div>
                                </div>
                                <div class="picture">
                                    <img src="" alt="">
                                    <div class="word">大洋湾景区</div>
                                </div>
                                <div class="picture">
                                    <img src="" alt="">
                                    <div class="word">大洋湾景区</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 图文详情 -->
        <div class="details">
            <span>图文详情</span>
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
        </div>
    </div>
</body>
</html>